<template>
	<div class="content">
		<div class="base">
			<Form inline class="fl">
				<Input type="text" placeholder="请输入个人ID" class="w200 m-r10" v-model.trim="uuid" />
				<Input type="text" placeholder="请输入订单编号" class="w200 m-r10" v-model.trim="orderId" />
				<Select placeholder="请选择发货状态" class="w200 m-r10" v-model.trim="statusId">
					<Option value="0">全部</Option>
					<Option value="1">已发货</Option>
					<Option value="2">未发货</Option>
				</Select>
				<DatePicker type="daterange" split-panels placeholder="请选择时间" class="w200 m-r10" format="yyyy-MM-dd HH:mm:ss" @on-change="getTime">
				</DatePicker>
				<Button type="primary" v-on:click="getConditionQuery">查询</Button>
			</Form>
		</div>
		<fieldset>
			<legend>汇总</legend>
			<div>
				<table>
					<tbody>
						<tr>
							<td>累积销售产品:
								<span class="blue" v-text="summary.num == null ? 0 : summary.num">0</span>
							</td>
							<td>累积消费积分:
								<span class="blue" v-text="summary.sumCO == null ? 0 : summary.sumCO">0</span>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</fieldset>
		<Button class="daochu" type="primary" size="large" @click="exportData">
            <Icon type="ios-download-outline"></Icon>导出
		</Button>
		<Table stripe :columns="columns" :data="conditionQuery" ref="table"></Table>
		<Page :total="info" show-elevator :page-size="pageSize" show-total @on-change="cuctGetQuery"></Page>
		<Modal v-model="modal" title="发货信息" width='40%' @on-ok="addSuressList">
			<Form :label-width="100" ref="addSuress">
				<FormItem label="物流公司" prop="deliveryCompany">
					<Input class="w-50" v-model="deliveryCompany" placeholder="请输入物流公司" />
				</FormItem>
				<FormItem label="快递编号" prop="logisticsNumber">
					<Input class="w-50" v-model="logisticsNumber" placeholder="请输入快递编号" />
				</FormItem>
			</Form>
		</Modal>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dataValue: [], // 时间段值
				conditionQuery: [], // 条件查询的结果
				info: null, // 总条数
				page: 1, // 页数
				pageSize: 20, // 每页多少条
				orderId: '', // 订单编号
				statusId: '', // 发货状态
				deliveryCompany: '', // 公司
				logisticsNumber: '', // 货单编号
				modal: false,
				userID: '', // 用户 ID
				uuid: '', // 个人 ID
				summary: '', // 汇总的内容
				columns: [{
						title: '个人ID',
						key: 'uuId',
						align: 'center'
					}, {
						title: '订单编号',
						key: 'orderId',
						align: 'center'
					},
					{
						title: '商品名称',
						key: 'commodityName',
						align: 'center'
					},
					{
						title: '数量',
						key: 'num',
						align: 'center'
					},
					{
						title: '消费总额',
						key: 'totalPrice',
						align: 'center'
					},
					{
						title: '收货人姓名',
						key: 'consignee',
						align: 'center'
					},
					{
						title: '收货人手机号',
						key: 'phone',
						align: 'center',
						render: (h, params) => {
							return h('div', params.row.phone == null ? '#' : params.row.phone)
						}
					},
					{
						title: '收货地址',
						key: 'shippingAddress',
						align: 'center'
					},
					{
						title: '状态',
						key: 'statusId',
						align: 'center',
						render: (h, params) => {
							if(this.conditionQuery[params.index].statusId == 1) {
								return h('div', '已发货')
							} else if(this.conditionQuery[params.index].statusId == 2) {
								return h('div', '未发货')
							}
						}
					},
					{
						title: '提交时间',
						key: 'createTime',
						align: 'center',
						sortable: true
					},
					{
						title: '发货操作',
						key: 'action',
						width: 150,
						align: 'center',
						render: (h, params) => {
							if(this.conditionQuery[params.index].statusId == 1) {
								return h('div', [
									h(
										'Button', {
											props: {
												type: 'primary',
												size: 'small',
												disabled: true
											},
											style: {
												marginRight: '5px'
											}
										},
										'已发货'
									)
								])
							} else {
								return h('div', [
									h(
										'Button', {
											props: {
												type: 'primary',
												size: 'small'
											},
											style: {
												marginRight: '5px'
											},
											on: {
												click: () => {
													// 把记录 ID 传给审核按钮
													this.getSuccess(this.conditionQuery[params.index].id);
												}
											}
										},
										'发货'
									)
								])
							}
						}
					}
				]
			}
		},
		mounted() {
			this.$Message.config({ // 配置弹窗的位置
				top: 250
			});
			this.getQuery(); // 订单列表查询
			this.getSummary(); // 汇总查询
		},
		methods: {
			getTime(daterange) {
				this.dataValue = daterange
			},
			exportData() { // 导出
				this.$refs.table.exportCsv({
					filename: '订单列表'
				})
			},
			getQuery() { // 订单列表查询
				let token = localStorage.getItem("mytoken");
				let params = this.qs.stringify({
					pn: this.page, // 当前页【可选，默认1】
					size: this.pageSize, // 每页记录数【可选，默认20】
					uuid: '', // 用户 ID
					orderId: '', // 订单编号
					statusId: '', // 发货状态
					startTime: '2000-12-30 00:00:00', // 起始日期
					endTime: '2200-12-30 00:00:00' // 结束日期
				})
				this.axios.post('order/orderlist', params, {
					headers: {
						Authorization: 'bearer ' + token
					}
				}).then(res => {
					if(res.data.code == 8008) {
						this.conditionQuery = res.data.data.orderListVOList;
						this.info = res.data.data.total;
					} else if(res.data.code == 5501) {
						this.$Message.info(res.data.message);
						localStorage.removeItem('mytoken');
						this.$router.push({
							name: 'login'
						})
					}
				})
			},
			cuctGetQuery(page) { // 订单列表分页查询
				let token = localStorage.getItem("mytoken");
				let params = this.qs.stringify({
					pn: page, // 当前页【可选，默认1】
					size: this.pageSize, // 每页记录数【可选，默认20】
					uuid: '', // 用户 ID
					orderId: '', // 订单编号
					statusId: '', // 发货状态
					startTime: '2000-12-30 00:00:00', // 起始日期
					endTime: '2200-12-30 00:00:00' // 结束日期
				})
				this.axios.post('order/orderlist', params, {
					headers: {
						Authorization: 'bearer ' + token
					}
				}).then(res => {
					if(res.data.code == 8008) {
						this.conditionQuery = res.data.data.orderListVOList;
					} else if(res.data.code == 5501) {
						this.$Message.info(res.data.message);
						localStorage.removeItem('mytoken');
						this.$router.push({
							name: 'login'
						})
					}
				})
			},
			getConditionQuery() { // 订单列表条件查询
				let spy;
				let token = localStorage.getItem("mytoken");
				if(this.statusId == 0) {
					spy = '';
				} else {
					spy = this.statusId;
				}
				let params = this.qs.stringify({
					pn: this.page, // 当前页【可选，默认1】
					size: this.pageSize, // 每页记录数【可选，默认20】
					uuid: this.uuid, // 用户 ID
					orderId: this.orderId, // 订单编号
					statusId: spy, // 发货状态
					startTime: this.dataValue[0] == '' ? '2000-12-30 00:00:00' : this.dataValue[0], // 起始日期
					endTime: this.dataValue[1] == '' ? '2200-12-30 00:00:00' : this.dataValue[1] // 结束日期
				})
				this.axios.post('order/orderlist', params, {
					headers: {
						Authorization: 'bearer ' + token
					}
				}).then(res => {
					if(res.data.code == 8008 || res.data.code == 4004) {
						this.conditionQuery = res.data.data.orderListVOList;
						this.info = res.data.data.total;
					} else if(res.data.code == 5501) {
						this.$Message.info(res.data.message);
						localStorage.removeItem('mytoken');
						this.$router.push({
							name: 'login'
						})
					}
				})
			},
			getSuccess(index) {
				this.modal = true;
				this.userID = index;
			},
			addSuressList() {
				this.$refs.addSuress.validate(valid => {
					if(valid) {
						let token = localStorage.getItem("mytoken");
						let params = this.qs.stringify({
							id: this.userID,
							deliveryCompany: this.deliveryCompany, // 公司
							logisticsNumber: this.logisticsNumber // 货单编号
						})
						this.axios.post('order/goods', params, {
							headers: {
								Authorization: 'bearer ' + token
							}
						}).then(res => {
							this.modal = false;
							if(res.data.code == 8008 || res.data.code == 4004) {
								this.$Message.info(res.data.message);
								this.getQuery();
							} else if(res.data.code == 5501) {
								this.$Message.info(res.data.message);
								localStorage.removeItem('mytoken');
								this.$router.push({
									name: 'login'
								})
							}
						})
					}
				})
			},
			getSummary() { // 汇总查询
				let token = localStorage.getItem("mytoken");
				this.axios.get('order/collect', {
					headers: {
						Authorization: 'bearer ' + token
					}
				}).then(res => {
					this.modal = false;
					if(res.data.code == 8008 || res.data.code == 4004) {
						this.summary = res.data.data.orderCollectVO;
					} else if(res.data.code == 5501) {
						this.$Message.info(res.data.message);
						localStorage.removeItem('mytoken');
						this.$router.push({
							name: 'login'
						})
					}
				})
			}
		}
	}
</script>

<style>

</style>